<template>
  <div class="wrap">
  	<!-- header -->
  	<header-v></header-v>
  	
  	<!-- content -->
  	<div class="app-content">
	  	<!-- 轮播  -->
			<div class="carousel">
				<swiper auto loop dots-position='center' height='aspect-ratio'>
		    	<div v-for="item in carousel">
		      	<swiper-item><img :src="item.src" /><p><strong>{{ item.title }}</strong> <br /> <span>{{ item.date }}</span> <br /> {{ item.desc }} </p></swiper-item>
		      </div>
		    </swiper>
			</div> 
			
			<div class="content_1">
				<div class="scope">
					<p class="title" ref="pic" >参考范围</p>
					<grid :rows="2">
			      <grid-item :label="item.label" v-for="item in picture">
			        <img slot="icon" class="scope_pic" :src="item.url" @click="zoom" />
			      </grid-item>
			   	</grid>
			    <p>国际应用技术交流提升行业整体竞争力</p>
		   	</div>
		    <div class="account">
		    	<p class="title">参展理由</p>
		    	<panel :list="list" :type="type"></panel>
		    </div>
			</div>
			
			<div class="content_2">
				<div class="content">
			    <span class="title">评奖活动</span>
					<div class="activity" v-for="item in activity">
			    	<p>{{ item.title }}</p>
			    	<p>{{ item.label }}</p>
			    	<div class="pic">		
			    		<img :src="item.src" alt="" />
			    	</div>
			    	<p>{{ item.con }}</p>
			    </div>
				 </div>
			  <div class="makes" v-for="item in makes">
			    <div class="make">
			    	<p><strong>{{ item.con }}</strong>{{ item.con2 }}</p>
			    </div>
			    <div class="make2">
			    	<p>{{ item.con3 }}</p>
			    </div>
			  </div>
			</div>
			
			<div class="content_3">
				<p class="title">参展流程</p>
				<div class="con">
					<svg class="wqd-svgicon" viewBox="-250 -250 2392 2392" xmlns="http://www.w3.org/2000/svg"><path fill="#7eb732" d="M832 960v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136z"></path></svg>
					<span style="color:#FFFFFF;" v-for="item in flow">
						{{ item.con }} <br/> {{ item.con2 }} <br /> {{ item.con3 }} <br/> {{ item.con4 }}
					</span>
				</div>
				<div class="con">
					<p class="title">联系方式</p>
					<div class="contact">
						<svg class="wqd-svgicon" viewBox="-250 -250 2392 2392" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150 362 150 150 362z"></path></svg>
						<span style="color:#FFFFFF;" v-for="item in contact">
							{{ item.address }} <br /> {{ item.contacts }} <br /> {{ item.telephone }} <br /> {{ item.cellphone }}
						</span>
					</div>
				</div>
			</div>
  	</div>
  	
  	<!-- footer -->
  	<footerV></footerV>
  </div>
</template>

<script>
import header from './public/header'
import footer from './public/footer'
import { Swiper, Grid, GridItem, Panel, SwiperItem } from 'vux'

import picture_01 from '../assets/picture_01.jpg'
import picture_02 from '../assets/picture_02.jpg'
import picture_03 from '../assets/picture_03.jpg'
import picture_04 from '../assets/picture_04.jpg'

import list_1 from '../assets/icon_1.png'
import list_2 from '../assets/icon_2.png'
import list_3 from '../assets/icon_3.png'
import list_4 from '../assets/icon_4.png'

import activity_1 from '../assets/picture_05.jpg'
import activity_2 from '../assets/picture_06.jpg'
import activity_3 from '../assets/picture_07.jpg'

import carousel_1 from '../assets/carousel_01.jpg'
import carousel_2 from '../assets/carousel_02.jpg'
import carousel_3 from '../assets/carousel_03.jpg'

export default {
  components: {
  	headerV : header, footerV : footer, 
  	Swiper, SwiperItem, GridItem, Grid, Panel
  },
  data () {
    return {
      carousel : [
    		{
    			src : carousel_1,
    			title : '2016上海某某某某展览会',
    			date : '12月4-6日',
    			desc : '上海某某国际会展中心'
    		},
    		{
    			src : carousel_2,
    			title : '展出面积20000㎡',
    			desc : '参观观众30000人次'
    		},
    		{
    			src : carousel_3,
    			title : '帮助企业提高企业知名度',
    			desc : '抢先占领市场'
    		}
    	],
    	picture : [
	    	{
	    		url : picture_01,  
	    		label : '绿色有机食品'
	    	},
	    	{
	    		url : picture_02,  
	    		label : '绿色有机饮品'
	    	},
	    	{		
	    		url : picture_03,
	    		label : '绿色有机调味品'
	    	},
	    	{
	    		url : picture_04,
					label : '相关设备和服务'	    		
	    	}
    	],
    	type : '1',
    	list: [
    		{
	        src: list_1,
	        title: '$品牌吸引力',
	        desc: '在同行和客户间展示形象、提升行业地位、品牌价值度、知名度。',
	        url: '/'
	      }, 
	      {
	        src: list_2,
	        title: '$市场策略',
	        desc: '了解市场信息、拓展销售渠道、获取市场订单、维护销售网络',
	        url: '/'
	      },
	      {
	        src: list_3,
	        title: '$获取产品的Fans',
	        desc: '您的产品很可能被近百家专业及大众媒体关注和跟踪宣传',
	        url: '/'
	      },
	      {
	        src: list_4,
	        title: '$获取市场订单',
	        desc: '获得金钱的同时赢得声誉，成为产品中的明星',
	        url: '/'
	      },
      ],
      activity : [
      	{
      		title : '金奖',
      		label : '赢取市场荣誉，扩大产品销售',
      		src : activity_1,
      		con : '在同行和客户间展示形象、提升行业地位、品牌价值度、知名度。'
      	},
      	{
      		title : '“推荐新产品”奖',
      		label : '提升企业的品牌知名度和美誉度',
      		src : activity_2,
      		con : '您的产品很可能被近百家专业及大众媒体关注和跟踪宣传'
      	},
      	{
      		title : '优质产品、最佳产品”奖',
      		label : '提高知名度，赢得更全面的宣传方式',
      		src : activity_3,
      		con : '获得金钱的同时赢得声誉，成为产品中的明星'
      	}
      ],
      makes : [{
      		con : '打造亚洲最具影响力的绿色有机食品展',
      		con2 : '——不单单是有机，更多是有机会',
      		con3 : '——极力打造中国专注于绿色有机食品行业规模最大的盛会'
      }],
      flow : [{
      	con : '1．填写申请表传真至组织单位：展位分配：“先申请，先付款，先安排双面开口展位加收20%费用。” ',
      	con2 : '2．申请展位3个工作日内将参展费用电汇或交至组织单位。',
      	con3 : '3．参展商在汇出各项费用后，请将银行汇款单传真至组织单位。',
      	con4 : '4．组织单位在收到展台费用后，展会开始前一个月寄《参展手册》给参展商。'
      }],
      contact : [{
  			address : '上海某某服务有限公司',
	  		contacts : '联系人：某先生',
	  		telephone : '电 　 话：021-5150000x',
	  		cellphone : '手 　 机：15618900000x'
      }]
    }
  },
  methods : {
  	demo06_onIndexChange (index) {
		    this.demo06_index = index
		},
		zoom (ev){	
			
			ev.target.classList.add('active');
			
			setTimeout(function (){	
				ev.target.classList.remove('active');
			},600);
			
		}
	}
}
	
</script>


<style>
	
	/* index.style */
	
	body{
		background-color: #fff !important;
	}
	.wrap{
		width:100%; margin: 0 auto;
	}
	body,a,p,li,ul,h1,h2,h3,h4,h5,strong,div,img{
		font-size: 0.14rem; font-family: "微软雅黑",arial; margin: 0; padding: 0; border: none;
	}
	.weui-panel__bd .weui-media-box:hover, .weui-grids .weui-grid:hover{
		background: none !important;
	}
	.weui-panel__bd .weui-media-box{
		-webkit-transform: translateX(3.2rem); transform: translateX(3.2rem); -webkit-transition: 600ms; transition: 600ms;
	}
	.weui-panel__bd .weui-media-box{
		-webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: 600ms; transition: 600ms;
	}
	.weui-media-box_appmsg .weui-media-box__hd{
		width: 0.6rem; height: 0.6rem;
	}
	.weui-panel{
		overflow: inherit;
	}
	.app-content{
		width: 100%; overflow: hidden;
	}
	.carousel .vux-slider > .vux-indicator > a > .vux-icon-dot{
		width: 0.06rem !important; height: 0.06rem !important; border-radius: 0.03rem !important; margin-left: 0.06rem;
	}
	.carousel .vux-swiper-item,.carousel2 .vux-swiper-item{
		height: 0rem !important;
	}
	.content_1{
		background: url('../assets/content_bg.jpg') center center no-repeat; background-size:cover; width:100%;
	}
	.carousel .vux-swiper img{
		width:100%;
	}
	.carousel .vux-swiper{
		height: 1.93rem !important;
	}
	.carousel .vux-swiper strong{
		font-weight: normal;
	}
	.carousel .vux-swiper p{
		margin-top: -1.5rem; text-align: center; color: #fff; font-size: 0.15rem;
	}
	.carousel .vux-swiper .vux-swiper-desc{
		top: 40%; text-align: center; padding:0 0.35rem !important; background-image: none !important; font-size: 0.18rem !important; 
	}
	.content_1 .weui-grid{
		padding: 0 !important; height: 1.5rem; margin-bottom: 0.1rem; 
	}
	.weui-grids:before,.weui-grid:after,.weui-grid:before{
		border: none !important;
	}
	.content_1 .weui-grid img{
		width: 85% !important; margin-left: 0.12rem;
	}
	.content_1 .weui-grid .weui-grid__icon{
		height: 0.87rem; width:100%; border: none !important;
	}
	.content_1 .title{
		color: #fff; width: 100%; line-height: 0.7rem; font-size: 0.23rem; font-weight: bold; text-align: center;
	}
	.content_1 .scope .title{
		line-height: 0.8rem;
	}
	.content_1 .weui-grid__label span{
		display: block; font-size: 0.12rem; background-color: rgb(115,84,84); border-radius: 0.4rem; padding: 0.1rem 0.05rem; width:60%; margin: 0.08rem auto; color: #fff;
	}
	.content_1 .scope p:nth-of-type(2){
		text-align: center; margin: 0 auto; color: #fff; font-weight: bold; border-bottom: 0.01rem dashed rgba(255,255,255,0.2); width:90%; line-height: 0.4rem;
	}
	.content_1 .account .weui-panel{
		background-color: rgba(255,255,255,0) !important;
	}
	.content_1 .account .weui-panel .weui-media-box__desc,.account .weui-media-box__title{
		color: #fff !important; font-size: 0.12rem; line-height: 0.2rem;
	}
	.content_1 .account .weui-media-box__title{
		font-size: 0.16rem !important; line-height: 0.3rem;
	}
	.weui-panel:before,.weui-panel:after,.weui-media-box:before{
		border: none !important;
	}
	.content_1 .weui-media-box__hd{
		width:0.64rem !important; height: 0.64rem !important;
	}
	.content_1 .weui-media-box__hd img{
		width:0.64rem !important; height: 0.64rem !important;
	}
	.content_1 .weui-media-box:nth-of-type(4){
		padding-bottom: 0.2rem;
	}
	.app-footer{
		width: 100%; overflow: hidden;
	}
	
	.content_2{
		background-color: #e2e2e2; 
	}
	.content_2 .content{
		padding: 0 0.08rem;
	}
	.content_2 .activity{
		border-bottom: 0.01rem solid #679302; text-align: center;
	}
	.content_2 .title{
		color: #FFA07A; width:32%; display: block; margin: 0 auto; padding-top: 0.1rem; font-size: 0.24rem; border-bottom: 0.01rem solid #FFA07A;line-height: 0.35rem;
	}
	.content_2 .activity p:nth-of-type(1){
		color: #585858; font-size: 0.2rem; line-height: 0.6rem; margin-top: 0.22rem;
	}
	.content_2 .activity p:nth-of-type(2){
		font-size: 0.16rem; margin-bottom: 0.1rem;
	}
	.content_2 .activity p:nth-of-type(3){
		color: #424242; font-size: 0.12rem; margin: 0.3rem auto; width:85%;
	}
	.content_2 .activity img{
		border-radius: 50%; border: 0.07rem solid #fff; width:1.68rem; height: 1.68rem;
	}
	.content_2 .activity .pic{
		text-align: center; width:100%;
	}
	.content_2 .make{
		padding:0.2rem 0; text-align: center; width:85%; margin:0 auto;
	}
	.content_2 .make p{
		font-size: 0.2rem !important; color: #585858; 
	}
	.content_2 .make strong{
		font-size: 0.2rem !important;
	}
	.content_2 .make2{
		background: url(../assets/make2.jpg) no-repeat; background-size:cover; color: #fff; text-align: center; padding: 0.1rem 0;
	}
	.content_2 .make2 p{
		font-size: 0.18rem; color: #FF8C00; width:90%; margin: 0.1rem auto;
	}
	
	.content_3{
		background: url(../assets/content3_bg.jpg) center center no-repeat; background-size:cover; width:100%;
	}
	.content_3 .title{
		color: #fff; font-size: 0.2rem; line-height: 0.8rem; margin-left: 0.2rem;
	}
	.content_3 svg{
		width:0.3rem; height: 0.3rem; float: left;
	}
	.content_3 .con {
		width: 95%; border-bottom: 0.01rem solid rgba(126,183,50,0.5); padding-left: 0.1rem; padding-bottom: 0.2rem;
	}
	.content_3 .con:nth-of-type(2){
		border: none;
	}
	.content_3 .con span{
		display: block; margin-left: 0.3rem;
	}
	.content_1 .active{
		-webkit-animation: zoom 0.5s;animation: zoom 0.5s;
	}
	
</style>